<template>
	<div class="home">
		<Tabbar :leftArrow="true" :title="$t('textTrans.投资广场')" :hidden='false'></Tabbar>
		<div class="loginCon">
			<div class="top" style="color: #fff;font-size:15px;text-align: left;text-indent: 20px;overflow: hidden;">
				<div style="margin: 20px 0 10px 0;">
					
					{{$t('textTrans.推广账户')}}
					{{$t('textTrans.余额')}}
				</div>
				<div v-if="account" style="font-size: 18px;font-weight: 550;">
					{{account[2]}} TRX
				</div>
			</div>
			<div class="bottom">
				  <van-cell :title="$t('textTrans.名称')" :value="data.name" />
				  <van-cell :title="$t('textTrans.起始金额')" :value="data.min" />
				  <van-cell :title="$t('textTrans.最高投资额')" :value="data.max" />
				  <van-cell :title="$t('textTrans.循环')" :value="data.day" />
				  <van-cell :title="$t('textTrans.利率')" :value="data.rate" />
				  <van-cell :title="$t('textTrans.限制次数')" :value="data.limit_number" />
				  
				  <van-field   :label="$t('textTrans.推广账户')" v-model="form.account" :placeholder="$t('textTrans.请输入推广账户')"  clearable style="margin:20px 0;">
				  </van-field>
				<van-field   :label="$t('textTrans.安全密码')" v-model="form.pay_password" :placeholder="$t('textTrans.请输入安全密码')" type="password" clearable style="margin:20px 0;">
				</van-field>
				<div style="font-size: 13px;color: #00A170;text-align: right;">
					{{form.account}}+({{form.account}}*{{data.rate}}*{{data.day /100}})={{Number(form.account+( form.account*data.rate*data.day/100)).toFixed(3)}}
				</div>
				<van-button class="loginBtn" @click="submitReg">{{$t('textTrans.参与投资')}}</van-button>
				
			</div>
		</div>
	</div>
</template>
<script>
	import {
		projectDetail,invest
	} from "@/api/home";
	import Tabbar from "@/components/tabbar";
	import {
		userInfo,
		homePage,
		account
	} from "@/api/personal";
	export default {
		data() {
			return {
				disabled: false,
				timer: null,
				timeTips: "发送验证码",
				time: 60,
				readonly: false,
				data:{},
				account:[],
				form: {
					account:1,
					pay_password:'',
					// member: "",
					// code:'',
					// pay_password: "",
				},
			};
		},
		created() {
			account().then(res=>{
				this.account = res
			})
			projectDetail({id:this.$route.query.id}).then(res=>{
				this.data = res
				this.form = { account:Number(res.min),...this.form }
				// this.form.account = res.min
				console.log(res)
			})
		},
		components: {
			Tabbar,
		},
		methods: {
			toLogin() {
				this.$router.push({
					name: "mall",
				});
			},
			getCode() {
				sendSms(this.form.member).then((res) => {
					let time = this.time;
					const timer = setInterval(() => {
						if (time <= 1) {
							this.disabled = false;
							this.timeTips = "发送验证码";
							clearInterval(timer);
						} else {
							this.disabled = true;
							time--;
							this.timeTips = time + "s后重新获取";
						}
					}, 1000);
				});
			},
			submitReg() {
				invest({id:this.$route.query.id,...this.form}).then((res) => {
					this.$router.go(-1);
				});
			},
		},
	};
</script>
<style lang="less" scoped>
	.home {
		width: 100%;
	
		// background: white;

		.register {
			font-size: 14px;
			margin: 20px;
			text-align: center;
			color: #00A170;
		}

		.top {
			width: 92%;
			height:100px;
			margin: 10px auto;
			background: url(../../assets/imgs/quotation/tz1.png) no-repeat;
			background-size: 100% 100%;
			text-align: center;

		
		}

		.bottom {
			width: 94%;
			position: absolute;
			background: url('../../assets/imgs/home/background.png') no-repeat;
			background-size: 100% 100%; 
			z-index: 4;
			// background: white;
			padding: 20px 3%;

		}

		.loginTop {
			width: 100%;
			height: 187px;

			.van-nav-bar {
				background-color: transparent;
			}

			[class*="van-hairline"]::after {
				border: 0 none;
			}
		}

		.bottom-nav {
			display: flex;
			padding: 14px 14px;
			font-size: 14px;
			color: #00A170;
			justify-content: space-between;
		}

		.loginCon {
			width: 100%;
			z-index: 99;
			box-sizing: border-box;



			/deep/ [class*="van-hairline"]::after {
				border: 0 none;
			}
		}

		.loginIcon {
			width: 16px;
			height: 20px;
		}
       .van-cell{
		   margin: 10px auto;
		   padding-left: 0;
		   background: #F8F8F8;
		   padding: 14px 10px;
		   border-radius: 8px;
		   
	   }
		.van-field {
			margin: 10px auto;
			padding-left: 0;
			background: #F8F8F8;
			padding: 14px 10px;
			border-radius: 8px;

			/deep/.van-button--primary {
				color: #333;
				background: #00A170;
				border: none;
			}

			.van-field__button {
				.van-button {
					color: #333;
					font-size: 15px;
				}
			}
		}

		.van-cell:not(:last-child)::after {
			border: 0 none;
		}

		/deep/.van-field__control {
			&::placeholder {
				color: #999999;
			}
		}

		/deep/.van-field__control {
			color: #333;
		}

		.loginBtn {
			background: #00A170;
			width: 100%;
			display: block;
			height: 49px;
			font-size: 15px;
			font-weight: bold;
			margin: 45.5px auto 0;
			border-radius: 25px;
			border: none;
			color: #fff;
			line-height: 44px;
		}
	}
</style>
